<template>
  <div>

    <!-- 卡片视图 -->
    <el-card class="box-card">

      <!-- 角色列表区域 -->
      <el-table :data="rolelist"  stripe>
        <!-- 索引列 -->
        <el-table-column type="index"></el-table-column>
        <el-table-column label="角色名称" prop="roleName" width="300px"></el-table-column>
        <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
        <el-table-column label="操作" width="200px" align="center">
			<template #default="scope">
            <el-button size="mini" type="warning" icon="el-icon-setting" @click="showDialog(scope.$index)">分配权限</el-button>
			</template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新生权限对话框 -->
    <el-dialog v-model="dialogTableVisible1" title="分配权限"  width="30%" center>
      <!-- 树形控件 -->
      <el-tree  :data="rightslist1" :props="defaultProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ref="tree1"></el-tree> <!-- node-key="id"选中复选框时 是选中对应的id（？）这个id后面要用到 后面这个default-checked-keys就是默认选中的框 是根据id来选中的 后面还要把选中的id保存起来 都要用到这个id -->
      <template #footer>
		<el-button type="primary" @click="allotRights1">确 定</el-button>
        <el-button @click="dialogTableVisible1 = false">取 消</el-button>
      </template>
    </el-dialog>

	<!-- 学校管理员权限对话框 -->
    <el-dialog v-model="dialogTableVisible2" title="分配权限"  width="30%" center>
      <!-- 树形控件 -->
      <el-tree :data="rightslist2" :props="defaultProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ref="tree2"></el-tree> <!-- node-key="id"选中复选框时 是选中对应的id（？）这个id后面要用到 后面这个default-checked-keys就是默认选中的框 是根据id来选中的 后面还要把选中的id保存起来 都要用到这个id -->
      <template #footer>
		<el-button type="primary" @click="allotRights2">确 定</el-button>
        <el-button @click="dialogTableVisible2 = false">取 消</el-button>
      </template>
    </el-dialog>

	<!-- 学校财务部权限对话框 -->
    <el-dialog v-model="dialogTableVisible3" title="分配权限"  width="30%" center>
      <!-- 树形控件 -->
      <el-tree :data="rightslist3" :props="defaultProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ref="tree3"></el-tree> <!-- node-key="id"选中复选框时 是选中对应的id（？）这个id后面要用到 后面这个default-checked-keys就是默认选中的框 是根据id来选中的 后面还要把选中的id保存起来 都要用到这个id -->
      <template #footer>
		<el-button type="primary" @click="allotRights3">确 定</el-button>
        <el-button @click="dialogTableVisible3 = false">取 消</el-button>
      </template>
    </el-dialog>

	<!-- 学校事务部权限对话框 -->
    <el-dialog v-model="dialogTableVisible4" title="分配权限"  width="30%" center>
      <!-- 树形控件 -->
      <el-tree :data="rightslist4" :props="defaultProps" show-checkbox node-key="id" default-expand-all :default-checked-keys="defKeys" ref="tree4"></el-tree> <!-- node-key="id"选中复选框时 是选中对应的id（？）这个id后面要用到 后面这个default-checked-keys就是默认选中的框 是根据id来选中的 后面还要把选中的id保存起来 都要用到这个id -->
      <template #footer>
		<el-button type="primary" @click="allotRights4">确 定</el-button>
        <el-button @click="dialogTableVisible4 = false">取 消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from '../../utils/request'
export default {
	data() {
		return {
			// 所有角色列表数据
			rolelist: [
				{
					roleName: '新生',
					roleDesc: '准备进入校园的新生'
				},
				{
					roleName: '学校管理人员',
					roleDesc: '学校对通知等进行管理的相关人员'
				},
				{
					roleName: '学校财务部',
					roleDesc: '学校迎新财务办理的相关人员'
				},
				{
					roleName: '学校事务部',
					roleDesc: '学校迎新事务办理的相关人员'
				},
			],
			rightslist1: [
				{
					id: 1,
					label: '菜单权限',
					children: [
						{
							id: 2,
							label: '个人信息'
						},
						{
							id: 3,
							label: '选床位'
						},
						{
							id: 4,
							label: '在线缴费'
						},
						{
							id: 5,
							label: '困难申请'
						}
					]
				}
			],
			rightslist2: [
				{
					id: 1,
					label: '菜单权限',
					children: [
						{
							id: 2,
							label: '公告管理'
						},
						{
							id: 3,
							label: '报道信息查询'
						},
						{
							id: 4,
							label: '缴费信息查询'
						},
						{
							id: 5,
							label: '学生情况概览'
						}
					]
				}
			],
			rightslist3: [
				{
					id: 1,
					label: '菜单权限',
					children: [
						{
							id: 2,
							label: '入住办理'
						},
						{
							id: 3,
							label: '现场缴费'
						},
						{
							id: 4,
							label: '院系报道'
						},
						{
							id: 5,
							label: '绿色通道办理'
						},
						{
							id: 6,
							label: '生活用品办理'
						}
					]
				}
			],
			rightslist4: [
				{
					id: 1,
					label: '菜单权限',
					children: [
						{
							id: 2,
							label: '入住办理'
						},
						{
							id: 3,
							label: '现场缴费'
						},
						{
							id: 4,
							label: '院系报道'
						},
						{
							id: 5,
							label: '绿色通道办理'
						},
						{
							id: 6,
							label: '生活用品办理'
						}
					]
				}
			],
			// 树形控件的属性绑定对象
			defaultProps: {
				children: 'children',
				label: 'label',
				disabled: 'disabled',
			},
			// 默认选中的节点Id值数组
			defKeys: [],
			// 当前即将分配权限的角色id
			requestList: {
				firstParameter: 1,
				secondParameter: []
			},
			i: 0,
			dialogTableVisible1: false,
			dialogTableVisible2: false,
			dialogTableVisible3: false,
			dialogTableVisible4: false,
		}
	},
	methods: {
		// 展示分配权限窗口
		showDialog(index) {
			console.log(index)
			if (index === 0) {
				this.dialogTableVisible1 = true
			}
			if (index === 1) {
				this.dialogTableVisible2 = true
			}
			if (index === 2) {
				this.dialogTableVisible3 = true
			}
			if (index === 3) {
				this.dialogTableVisible4 = true
			}
		},
		// 点击确定给新生分配权限
		allotRights1() {
			this.requestList.firstParameter = 1
			for (this.i = 0; this.i < this.$refs.tree1.getCheckedNodes(true,false).length; this.i++) {
				this.requestList.secondParameter.push(this.$refs.tree1.getCheckedNodes(true,false)[this.i].label)
			}
			request.post('/api/role-permission/set',JSON.stringify(this.requestList))
			this.requestList.secondParameter = []
			this.dialogTableVisible1 = false
		},
		// 点击确定给学校管理员分配权限
		allotRights2() {
			this.requestList.firstParameter = 4
			for (this.i = 0; this.i < this.$refs.tree2.getCheckedNodes(true,false).length; this.i++) {
				this.requestList.secondParameter.push(this.$refs.tree2.getCheckedNodes(true,false)[this.i].label)
			}
			request.post('/api/role-permission/set',JSON.stringify(this.requestList))
			this.requestList.secondParameter = []
			this.dialogTableVisible2 = false
		},
		// 点击确定给学校财务部分配权限
		allotRights3() {
			this.requestList.firstParameter = 2
			for (this.i = 0; this.i < this.$refs.tree3.getCheckedNodes(true,false).length; this.i++) {
				this.requestList.secondParameter.push(this.$refs.tree3.getCheckedNodes(true,false)[this.i].label)
			}
			request.post('/api/role-permission/set',JSON.stringify(this.requestList))
			this.requestList.secondParameter = []
			this.dialogTableVisible3 = false
		},
		// 点击确定给学校事务部分配权限
		allotRights4() {
			this.requestList.firstParameter = 3
			for (this.i = 0; this.i < this.$refs.tree4.getCheckedNodes(true,false).length; this.i++) {
				this.requestList.secondParameter.push(this.$refs.tree4.getCheckedNodes(true,false)[this.i].label)
			}
			request.post('/api/role-permission/set',JSON.stringify(this.requestList))
			this.requestList.secondParameter = []
			this.dialogTableVisible4 = false
		},
	}
}
</script>

<style lang="less" scoped>
.box-card {
	height: 590px;
}

</style>
